<!DOCTYPE html>
<html lang="en">
<!--  基于  课程：黑马程序员  《4个小时带你快速入门vue》
            地址：https://www.bilibili.com/video/BV12J411m7MG
        自己归纳的进阶知识
        -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue进阶</title>
</head>

<body>

    <div id="app">
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>
    
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="./js/vuev2.7.14.js"></script>

    <script>
        //全局注册，它们在注册之后可以用在任何新创建的 Vue 根实例
        //第一个参数my-component:组件名称，有两种写法：my-component-name和MyComponentName，即用横杠 代替首字母大写。
        Vue.component('my-component',{
            //在组件中，data 是函数，将数据对象返回
            data(){return {count:0}},
            template:'<button @click="count++">被单击{{count}}次</button>'
        })
        var app = new Vue({
            el:'#app'
        });
    </script>


</body>


</html>